<template>
	<view class="flu_wrap flex-row just-center">
		<div class="flu">
			<text v-for="(item,i) in 30" :class="is_cannel?'asr_red':''"></text>
			<!--  :style="countStyle(i)" -->
		</div>
	</view>
</template>

<script>
	export default {
		name: "fluctuate",
		props: {
			is_cannel: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		methods: {
			countStyle(i) {
				let style = `left:${(i+6)*11}rpx;animation-delay:${(i+1)*.1}s`
				return style
			}
		}
	}
</script>

<style scoped>
	.flu_wrap {
		width: 100%;
		height: 100%;
	}

	.flu {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.flu text {
		display: block;
		bottom: 34rpx;
		width: 4rpx;
		height: 10rpx;
		background: #9b59b6;
		position: absolute;
		border-radius: 10rpx;
		animation: preloader_1 2s infinite ease-in-out;
	}

	.asr_red {
		background: #fff !important;
		animation: none !important;
	}

	@keyframes preloader_1 {
		0% {
			height: 10rpx;
			transform: translateY(0rpx);
			background: #9b59b6;
		}

		50% {
			height: 30rpx;
			transform: translateY(10rpx);
			background: #3498db;
		}

		100% {
			height: 10rpx;
			transform: translateY(0rpx);
			background: #9b59b6;
		}
	}
</style>